<template>
  <view>
    <u-navbar
      height="50"
      back-icon-color="#333"
      title="拼团商品详情"
      title-color="#333"
      title-size="36"
    >
    </u-navbar>
    <u-swiper
      v-if="groupInfo && groupInfo.spu && groupInfo.spu.sliderPicUrls"
      :list="groupInfo.spu.sliderPicUrls"
      height="750"
      border-radius="0"
      mode="number"
      indicator-pos="bottomRight"
    ></u-swiper>
    <view class="goodsView" v-if="groupInfo">
      <view class="goodsTitle">{{ groupInfo.name }}</view>
      <!-- <view class="goodsText">{{goodsInfo.desc}}</view> -->
      <view class="priceView">
        <view class="goodsPrice">
          <text class="goodsPrice-t">拼团价 </text>
          <text class="goodsPrice-f">¥</text>
          <text class="goodsPrice-p">{{ (groupInfo.combinationPrice * 0.01).toFixed(2) }}</text>
        </view>
        <view class="goodsPrice" style="margin-left: 20rpx">
          <text style="color: #666666">原价 </text>
          <text style="color: #666666; text-decoration: line-through"
            >¥{{ (groupInfo.price * 0.01).toFixed(2) }}</text
          >
        </view>
      </view>
      <view class="groupTotal">{{ groupInfo.userSize || 0 }}人团</view>
    </view>
    <view
      style="position: absolute; top: 200rpx; left: 0; right: 0; text-align: center; color: orange"
      v-else
    >
      <text>{{ groupLoading ? '数据加载中' : '数据获取失败' }}</text>
    </view>
    <!-- <view class="pickupView">
			<view class="pickupTitle">活动时间: {{startTime}} - {{endTime}}</view>
			<view class="pickupTime">{{goodsInfo}}</view>
		</view> -->
    <!-- v-if="groupList.length > 0" -->
    <u-gap height="20"></u-gap>
    <view class="groupView" v-if="groupIng.length > 0">
      <view class="otherView">
        <view class="otherTitle">人正在拼团，可直接参团</view>
        <view class="otherText">查看更多</view>
        <u-icon name="/static/more.png" size="14"></u-icon>
      </view>
      <view class="groupItemView" v-for="(item, index) in groupIng" :key="index">
        <u-avatar :src="item.avatar" size="60"></u-avatar>
        <view class="nickname">{{ item.nickname }}</view>
        <view class="groupTime">
          <view
            >还差<text>{{ item.userSize - item.userCount }}人</text>拼成</view
          >
          <view class="countDown">
            <view>还剩</view>
            <u-count-down
              :timestamp="item.syTime"
              format="HH:mm:ss"
              color="#FA453C"
              bg-color="#EEFEEF"
              fontSize="12"
            ></u-count-down>
          </view>
        </view>
        <view class="groupBtn" @click="onJoin(item)">参与参团</view>
      </view>
      <u-gap height="20"></u-gap>
    </view>
    <view class="goodsInfo" v-if="groupInfo && groupInfo.spu && groupInfo.spu.type != 'food'">
      <view class="sectionTitle" style="padding: 20rpx 0; font-weight: 500">商品详情</view>
      <u-parse :html="groupInfo.spu.description" :tag-style="tagStyle"></u-parse>
    </view>

    <u-gap height="100"></u-gap>
    <submitBar
      v-if="groupInfo"
      :isFollow="false"
      :isAdd="false"
      :isPay="false"
      :isShare="true"
      :isContect="false"
    >
      <view class="rightView" slot="right">
        <!-- <view class="cartView" @click="onShowSku(1)">
					<text class="goodsMoney">¥{{goodsInfo.price * 0.01}}</text>
					<text class="btnTitle">单独购买</text>
				</view> -->
        <view class="paymentView dis-flex" @click="onGoodsBuy">
          <text class="btnTitle" style="margin-right: 10rpx"
            >{{ groupInfo.userSize }}人拼团购买</text
          >
          <text class="goodsMoney">¥{{ (groupInfo.combinationPrice * 0.01).toFixed(2) }}</text>
        </view>
      </view>
    </submitBar>

    <!-- 	<vk-data-goods-sku-popup  v-if="skuPopup" ref="skuPopup" v-model="skuPopup2"
				border-radius="20" :localdata="skuInfo"
				:buy-now-text="showTxt == 2 ? `立即拼团` : `立即购买`"
				:mode="skuMode" goodsThumbName='cover_url' buy-now-background-color="#FFA114"
				goodsThumbBackgroundColor="#f5f5f5"
				add-cart-background-color="#FF4242" @buy="onGoodsBuy">
			</vk-data-goods-sku-popup> -->

    <!-- <vk-data-goods-sku-popup ref="skuPopup" v-model="skuPopup2"
			border-radius="20" :localdata="skuobj2"
			:buy-now-text="showTxt == 2 ? `立即拼团` : `立即购买`"
			:mode="skuMode" goodsThumbName='cover_url' buy-now-background-color="#FFA114"
			goodsThumbBackgroundColor="#f5f5f5"
			add-cart-background-color="#FF4242" @buy="onGoodsBuy">
		</vk-data-goods-sku-popup> -->

    <u-popup
      v-model="showPopup"
      height="520"
      border-radius="20"
      width="480"
      mode="center"
      :closeable="true"
    >
      <view class="numberView">
        <view class="numberTitle"
          >参与<text style="margin: 0 10rpx; font-size: 32rpx">{{ joinGroupInfo.nickname }}</text
          >的拼团</view
        >
        <view class="downView">
          <view class="downTitle"
            >仅剩<text style="color: #fa453c">{{
              joinGroupInfo.userSize - joinGroupInfo.userCount
            }}</text
            >个名额，
          </view>
          <u-count-down
            :timestamp="joinGroupInfo.syTime"
            color="#FA453C"
            format="HH:mm:ss"
            font-size="24"
            separator-color="#FA453C"
          ></u-count-down>
          <view>后结束</view>
        </view>
        <view class="userView" v-if="joinGroupInfo.join_list">
          <view class="userInfo">
            <view class="userItem">
              <u-avatar :src="joinGroupInfo.join_list.headRecord.avatar" size="80"></u-avatar>
              <view class="usetType">拼主</view>
            </view>
          </view>
          <view
            class="userInfo"
            v-if="joinGroupInfo.user_list"
            v-for="(sign, i) in joinGroupInfo.user_list"
            :key="i"
          >
            <view class="userItem">
              <u-avatar :src="sign.avatar || '/static/group-ava.png'" size="80"></u-avatar>
            </view>
          </view>
        </view>

        <button height="500" @click="onGoodsBuy" class="shareBtn">参与拼团</button>
      </view>
    </u-popup>
    <u-popup v-model="showShare" height="auto" border-radius="15" mode="bottom">
      <view class="share-box">
        <view class="" style="font-size: 30rpx; text-align: center; padding: 50rpx; color: #666666">
          分享好友
        </view>
        <view class="group dis-flex flex-y-around">
          <view class="group-item">
            <u-icon name="/static/wxhy.png" size="96"></u-icon>
            <view>微信好友</view>
          </view>
          <view class="group-item">
            <u-icon name="/static/pyq.png" size="96"></u-icon>
            <view>朋友圈</view>
          </view>
        </view>
        <u-gap height="20" bg-color="#F0F1F2" />
        <view
          class=""
          @click="showShare = false"
          style="font-size: 30rpx; height: 100rpx; line-height: 100rpx; text-align: center"
        >
          取消
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import submitBar from '@/components/submit-bar.vue'
export default {
  components: {
    submitBar
  },
  data() {
    return {
      showShare: false,
      showPopup: false,

      tagStyle: {
        table: 'border-collapse: collapse;',
        td: 'border: 1px solid #ccc;line-height: 1.5;min-width: 50px;padding: 3px 5px;text-align: left;'
      },
      groupGoodsId: '',
      goodsId: '',
      goodsInfo: undefined,
      groupIng: [],
      groupLoading: true,
      groupInfo: undefined,
      groupType: 1,
      // 是否打开SKU弹窗
      skuPopup: false,
      skuPopup2: false,
      // SKU弹窗模式
      skuMode: 3,
      // 后端返回的商品信息
      skuInfo: {},
      skuobj1: {},
      skuobj2: {
        product_id: '',
        sku_list: [],
        spec_list: []
      },
      showTxt: '',
      bannerList: [],
      groupList: [{}, {}],
      joinGroupInfo: [{}, {}],
      categoryIds: []
    }
  },
  watch: {
    skuPopup2(n, on) {
      console.log(n)
      this.skuPopup = n
    }
  },
  onLoad(res) {
    // this.combinationPrice = res.combinationPrice
    this.skuId = res.skuId || ''
    this.activityId = res.id || ''
    this.initData()
  },
  computed: {
    startTime() {
      return this.$utils.parseTime(this.groupInfo.startTime, '{y}-{m}-{d}')
    },
    endTime() {
      return this.$utils.parseTime(this.groupInfo.endTime, '{y}-{m}-{d}')
    }
  },
  methods: {
    initData() {
      this.$u
        .get('/app-api/promotion/combination-record/get-head-list', {
          activityId: this.activityId,
          status: 0
        })
        .then((res) => {
          this.groupIng = res.data
          let list = []
          res.data.forEach((item) => {
            item.syTime = (item.expireTime - new Date().getTime()) / 1000
          })
        })

      this.groupLoading = true
      this.$u
        .get('/app-api/promotion/combination-activity/get-detail', {
          activityId: this.activityId,
          skuId: this.skuId
        })
        .then((res) => {
          this.groupInfo = res.data
          this.groupLoading = false
        })
        .catch((e) => {
          this.groupLoading = false
        })

      // this.$u.api.getGoodsDetails({id: this.goodsId, spu: true}).then(res2 => {
      // 	this.goodsInfo = res2.data.product
      // 	this.categoryIds = [ res2.data.product.product_category_id ]
      // })
    },
    onJoin(info) {
      this.joinGroupInfo = info
      let user_list = []
      this.$u
        .get('/app-api/promotion/combination-record/get-detail', {
          id: info.id
        })
        .then((res) => {
          this.joinGroupInfo.join_list = res.data
          for (let i = 0; i < this.joinGroupInfo.userSize - 1; i++) {
            if (res.data.memberRecords && res.data.memberRecords[i]) {
              user_list.push(res.data.memberRecords[i])
            } else {
              user_list.push({})
            }
          }
          this.joinGroupInfo.user_list = user_list
          this.showPopup = true
        })
    },
    onShowSku(index) {
      //this.skuMode = index;
      this.showTxt = index
      this.skuPopup = true
      if (index == 1) {
        this.$set(this, 'skuInfo', this.skuobj1)
        this.skuInfo = this.skuobj1
      } else {
        this.$set(this, 'skuInfo', this.skuobj2)
        this.skuInfo2 = this.skuobj1
      }
      this.$nextTick(() => {
        this.skuPopup2 = true
      })

      // console.log(this.skuobj1)
      // console.log(this.skuobj2)
      // setTimeout(()=>{
      // 	this.skuPopup2 = true;
      // },200)
    },
    // onOrderConfirm(index) {
    // 	if (index == 0) {
    // 		this.$utils.route('/goods/order-confirm/order-confirm')
    // 	} else {
    // 		this.$utils.route({
    // 			url:"/goods/group-order-confirm/group-order-confirm",
    // 			params:{

    // 			}
    // 		})
    // 	}
    // },
    onGoodsBuy(item) {
      let items = []
      items.push({
        skuId: this.skuId,
        count: 1
      })
      this.$utils.route({
        url: '/goods/order-confirm/order-confirm',
        params: {
          items: JSON.stringify(items),
          combinationActivityId: this.activityId,
          combinationHeadId: this.joinGroupInfo.id
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import url('group-goods-details.css');

page {
  background: #eeeeef;
}

/* 
	::v-deep table {
		border-collapse: collapse;
	}

	::v-deep td{
		border: 1px solid #ccc;
	} */
.share-box {
  .group {
    margin: 20rpx;

    .group-item {
      text-align: center;
      font-size: 24rpx;
      color: #333333;
      line-height: 44rpx;
    }
  }
}
</style>
